<template>
	<view id="my">
		<view class="content">
			<view class="list">
				<view class="item p-15 bottom-underline" @click="headPortrait">
					<view class="item-title">
						<view class="title">头像</view>
						<view class="desc">
							<image @click.stop="onLookPicture(empImg)" :src="empImg" mode="aspectFill" />
						</view>
					</view>
					<text class="iconfont icon-jiantou"></text>
				</view>
				<view class="item bottom-underline" @click="modification('name')">
					<view class="item-title">
						<text class="title">姓名</text>
						<text class="desc">{{mineData.empName}}</text>
						<!--<input type="text" v-model="mineData.empName" />-->
					</view>
					<text class="iconfont icon-jiantou"></text>
				</view>
				<view class="item bottom-underline">
					<view class="item-title">
						<text class="title">年龄</text>
						<text class="desc">{{empBirthDate}}</text>
					</view>
				</view>
				<view class="item bottom-underline" @click="ModificationGender">
					<view class="item-title">
						<text class="title">性别</text>
						<text class="desc">{{mineData.empSex}}</text>
					</view>
					<text class="iconfont icon-jiantou"></text>
				</view>
				<view class="item" @click="modification('ipone')">
					<view class="item-title">
						<text class="title">电话</text>
						<text class="desc">{{mineData.empPhoneNumber}}</text>
					</view>
					<text class="iconfont icon-jiantou"></text>
				</view>

				<view class="item margin-top15 bottom-underline">
					<view class="item-title">
						<text class="title">所属物业</text>
						<text class="desc">{{mineData.orgName}}</text>
					</view>
				</view>
				<view class="item bottom-underline">
					<view class="item-title">
						<text class="title">所属部门</text>
						<text class="desc">{{mineData.postName}}</text>

					</view>
				</view>
				<view class="item">
					<view class="item-title">
						<text class="title">服务小区</text>
						<text class="desc">{{mineData.neiName}}</text>

					</view>
				</view>
			</view>
			<view v-show="submit" @click="saveClick" class="save-submit">保存</view>
		</view>
	</view>
</template>

<script>
	import { mineModule } from "../../../modules/mine.js"
	import util from "../../../utils/util.js"
	import { mapState, mapMutations } from 'vuex'
	const Mine = new mineModule()

	export default {
		data() {
			return {
				mineData: {},
				index: 0,
				submit: false
			};
		},
		watch: {
			mineData: {
				deep: true,
				handler(newVal, oloVal) {
					this.index++
					if (this.index > 2) {
						this.submit = true
					}
				}
			}
		},

		computed: {
			...mapState(['update']),
			empImg() {
				if (this.mineData.filesPrefix && this.mineData.filesPath) {
					console.log(this.mineData.filesPrefix + this.mineData.filesPath)
					return this.mineData.filesPrefix + this.mineData.filesPath
				}
			},
			empBirthDate() {
				if (this.mineData.empBirthDate) {
					console.log(this.mineData.empBirthDate)
					return util.ages(this.mineData.empBirthDate)
				}
			}
		},
		onLoad() {
			Mine.getMineData().then((res) => {
				this.mineData = res
			})
		},
		onShow() { // 监听用户详情页 保存数据后 ，这里页面跟着更新
			if (this.update) {
				Mine.getMineData().then((res) => {
					this.mineData = res
				})
			}
		},
		methods: {
			...mapMutations(['isUpdate']), // 调用vuex 里的方法
			headPortrait() {
				const empID = this.mineData.empID
				console.log(empID)
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: (res) => {
						const picture = res.tempFilePaths
						uni.navigateTo({
							url: `/pages/mine/crop/crop?picture=${picture}&empID=${empID}`
						})
					}
				})
			},
			onLookPicture(empImg) {
				console.log(empImg)
				uni.previewImage({
					urls: [empImg]
				})
			},
			modification(item) {
				//#ifdef APP-PLUS
				var that = this;
				if (item == 'name') {
					plus.nativeUI.prompt("请输入你要修改的名字 ", function(e) {
						e.index == 0 ? that.mineData.empName = e.value : ''
					}, "修改姓名", '', ["确定", "取消"]);
				} else if (item == 'ipone') {
					plus.nativeUI.prompt("请输入你要修改的电话号 ", function(e) {
						e.index == 0 ? that.mineData.empPhoneNumber = e.value : ''
					}, "修改电话", '', ["确定", "取消"]);
				}
				//#endif 
			},
			ModificationGender() {
				var that = this
				uni.showActionSheet({
					itemList: ['男', '女'],
					success (res) {
						if(res.tapIndex == 0 ){
							that.mineData.empSex = '男'
						} else if(res.tapIndex == 1){
							that.mineData.empSex = '女'
						}
					} 
				})
			},

			saveClick() {
				const { empName, empSex, empPhoneNumber} = this.mineData
			
				Mine.postMineData(empName , empSex, empPhoneNumber)
					.then((res)=>{
						this.isUpdate() // 将 vuex 里的值 update改为true  , 只有updata值为true时才更新页面 
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000) 
					})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../common/scss/common.scss";
	@import "../../../common/scss/iconfont.css";

	page {
		background-color: #F7F7F7;
	}

	.mui-icon {
		color: #ABABAB;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		margin: auto;
	}

	.bottom-underline {
		border-bottom: 1upx solid #eee;
	}

	.margin-top15 {
		margin-top: ws(15);
	}

	.p-15 {
		height: ws(85);
	}

	.content {
		.list {
			padding-top: ws(15);

			.item {
				padding: 0 ws(15);
				min-height: ws(44);
				display: flex;
				align-items: center;
				background-color: #fff;
				overflow: hidden;
				position: relative;

				.item-title {
					display: flex;
					align-items: center;
					height: 100%;
					position: relative;
					flex: 1;
					justify-content: space-between;

					.title {
						font-size: ws(16);
					}

					.desc {
						font-size: ws(14);
						color: #ABABAB;
						position: relative;

						image {
							width: ws(60);
							height: ws(60);
							border-radius: ws(5);
						}
					}
				}
			}
		}

		.save-submit {
			margin: auto;
			margin-top: ws(50);
			width: 80%;
			height: ws(44);
			line-height: ws(44);
			color: #fff;
			text-align: center;
			background-color: #2A83FF;
			box-shadow: 0 ws(1) ws(3) rgba(#2a83ff, .5);
			border-radius: ws(44);
		}
	}
	
	.iconfont{
		margin-left: ws(10);
	}
</style>
